<!doctype html>
<html lang="en" data-bs-theme="auto">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title>edit article</title>  
  <link href="/assets/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/assets/icons/bootstrap-icons.css">
  <link rel="stylesheet" href="/libs/tree/select-tree.css">

  <link href="/css/dashboard.css" rel="stylesheet">
  <script src="/js/jquery.min.js"></script>
  <script src="/libs/tree/select-tree.js"></script>

<!--  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.js"> </script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>-->
  <style type="text/css">
   /* div {
      width: 100%;
    }
*/
    .edui-editor {
      width: 830px !important;
      min-height: 300px;
      height: auto;
    }

    #edui1_iframeholder {
      min-height: 200px;
    }

    body {
      background-color: #FFFFFF;
    }
  </style>
</head>

<body>

  <div class="container-fluid">

    <h5 class="card-title mt-2">修改文章</h5>
    <hr>
    <div class="row">
      <div class="col-12">
        <form id="form" action="editarticlepost" method="post">

          <div class="row mb-3">
            <label for="topicid" class="col-sm-2 col-form-label text-sm-end">选择栏目</label>
            <div class="col-sm-10">
              <select class="form-select" id="topicid" name="topicid"></select>
            </div>
          </div>
          <div class="row mb-3">
            <label for="title" class="col-sm-2 col-form-label text-sm-end">标题</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="title" name="title" value="<% echo << obj["info"]["title"].to_string(); %>">
            </div>
          </div>
          <div class="row mb-3">
            <label for="title" class="col-sm-2 col-form-label text-sm-end">url网址</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="texturl" name="texturl" value="<% echo << obj["info"]["texturl"].to_string(); %>" placeholder="必须是英文数字下划线中划线">
            </div>
          </div>
          <div class="row mb-3">
            <label for="author" class="col-sm-2 col-form-label text-sm-end">作者</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="author" name="author" value="<% echo << obj["info"]["author"].to_string(); %>">
            </div>
          </div>
          <div class="row mb-3">
            <label for="fromsource" class="col-sm-2 col-form-label text-sm-end">来源</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="fromsource" name="fromsource" value="<% echo << obj["info"]["fromsource"].to_string(); %>">
            </div>
          </div>
          <div class="row mb-3">
            <label for="icoimg" class="col-sm-2 col-form-label text-sm-end">文章头图</label>
            <div class="col-sm-6">
              <div class="input-group mb-3">
              <input type="text" class="form-control" id="icoimg" name="icoimg" value="<% echo << obj["info"]["icoimg"].to_string(); %>" placeholder="列表使用封面图或头图使用">
              <input class="form-control" type="file" style="width:100px" id="relate-icoimg" accept=".png,.jpg,.jpeg">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="progress" id="progress-bar-show" style="display:none" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                  <div class="progress-bar" id="progress-bar" style="width: 0%">0</div>
                </div>
              <div id="progress-bar-result"><% 
              std::string temp=obj["info"]["icoimg"].as_string();
              
              if(temp.size()>0)
              {
                echo << "<a href='"<<temp<<"' target=_blank><img height=\"50\" width=\"50\" src=\""<<temp<<"\"/></a>";
              }
               %></div>  
            </div>
          </div>    
          <div class="row mb-3">
            <label for="keywords" class="col-sm-2 col-form-label text-sm-end">关键词</label>
            <div class="col-sm-10">
              <textarea class="form-control" id="keywords" rows="3" name="keywords"><% echo << obj["info"]["keywords"].to_string(); %></textarea>
            </div>
          </div>

          <div class="row mb-3">
            <label for="summary" class="col-sm-2 col-form-label text-sm-end">文章摘要</label>
            <div class="col-sm-10">
              <textarea class="form-control" id="summary" rows="3" name="summary" placeholder="250字以内"><% echo << obj["info"]["summary"].to_string(); %></textarea>
            </div>
          </div>
          <div class="row mb-3">
            <label for="content" class="col-sm-2 col-form-label text-sm-end">文章内容</label>
            <div class="col-sm-10">
              <textarea id="editor" style="width:830px" rows="10" name="content"><% echo << obj["info"]["content"].to_string(); %></textarea>
            </div>
          </div>

          <div class="row mb-3">
            <label for="relatecontent" class="col-sm-2 col-form-label text-sm-end">相关内容</label>
            <div class="col-sm-7">
              <div class="input-group mb-3">
                <input type="text" class="form-control" id="relatecontent" name="relatecontent" value="<% echo << obj["info"]["relatecontent"].to_string(); %>" placeholder="选择相关内容"
                  aria-label="相关内容" aria-describedby="relate-addon">
                <button class="btn btn-outline-secondary" type="button" id="relate-addon" data-bs-toggle="modal"
                  data-bs-target="#exampleModal">选择</button>
              </div>


            </div>
          </div>

          <div class="row mb-3">
            <div class="col-sm-10 offset-sm-2">
              <button type="submit" class="btn btn-primary">确认</button>
              <input type="hidden" id="aid" name="aid" value="<% echo<<obj["info"]["aid"].to_string(); %>" />
              <a href="/admin/listarticle" class="btn btn-link rounded-pill px-3">返回</a>
            </div>
          </div>

        </form>
      </div>
    </div>

  </div>


  <div class="modal modal-lg fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">相关内容</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <table class="table table-hover" id="selecttable">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">标题</th>
                <th scope="col">选择</th>
              </tr>
            </thead>
            <tbody>
            </tbody>

          </table>

          <ul class="pagination">
            <li class="page-item" id="select_pre">
              <a class="page-link" href="#" onclick="return select_prepage()">前一页</a>
            </li>
            <li class="page-item" id="select_next">
              <a class="page-link" href="#" onclick="return select_nextpage()">下一页</a>
            </li>
          </ul>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>

        </div>
      </div>
    </div>
  </div>

<div class="modal fade" id="myfiletobigModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">提示</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         文件太大了，请传4M以下的文件！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
         
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myfilesuccessModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="myfilesuccess" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="myfilesuccess">提示</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         上传成功！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">确定</button>
         
      </div>
    </div>
  </div>
</div>


  <script src="/assets/dist/js/bootstrap.bundle.min.js"></script>
  <script src="/nicedit/nicEdit.js" type="text/javascript"></script>
  <script lang="javascript">
    //var ue = UE.getEditor('editor');
       bkLib.onDomLoaded(function() {
	  new nicEditor({fullPanel : true,iconsPath : '/nicedit/nicEditorIcons.gif'}).panelInstance('editor');
    });
    
    var current_page =<% echo << obj["pageinfo"]["current"].to_int(); %>;
    var min_page =<% echo << obj["pageinfo"]["min"].to_int(); %>;
    var max_page =<% echo << obj["pageinfo"]["max"].to_int(); %>;

    var topicid =<% echo << obj["topicid"].to_int(); %>;
    var topic_json = <% echo << obj["list"].to_json(); %> ;
    $('#topicid').append($('<option>').val("0").text("所有栏目").attr("selected", true));
    for (var i = 0; i < topic_json.length; i++) {
      if (topic_json[i].id == topicid) {
        $('#topicid').append($('<option>').val(topic_json[i].id).text(topic_json[i].value).data("pid", topic_json[i].parentid).attr("selected", "selected"));
      }
      else {
        $('#topicid').append($('<option>').val(topic_json[i].id).text(topic_json[i].value).data("pid", topic_json[i].parentid));
      }
    }
    var treeselect = $("#topicid").selectTree({
      expandLevel: 1,
      changeCallBack: function (data) {
        topicid = data[0].value;
      }
    });

    $('#exampleModal').on('show.bs.modal', event => {

      $.getJSON("/admin/gettoparticle?topicid=" + topicid, function (result) {
        if (result.code == 0) {
          addselect_content(result.alist);
        }
      });
    });
    function addselect_content(alist) {
      var stable = $("#selecttable tbody");
      stable.empty();

      var relateval = $("#relatecontent").val();
      const artArray = relateval.split(",");

      for (let i = 0; i < alist.length; i++) {

        const row = document.createElement("tr");

        const cell = document.createElement("td");
        const cellText = document.createTextNode(alist[i].aid);
        cell.appendChild(cellText);

        row.appendChild(cell);


        const cella = document.createElement("td");
        const cellTexta = document.createTextNode(alist[i].title);
        cella.appendChild(cellTexta);

        row.appendChild(cella);


        var x = document.createElement("input");
        x.setAttribute("type", "checkbox");
        x.setAttribute("value", alist[i].aid);
        x.setAttribute("onClick", "select_addart(this.value,this)");

        if (artArray.length > 0) {
          for (let j = 0; j < artArray.length; j++) {
            if (alist[i].aid == artArray[j]) {
              x.setAttribute("checked", "checked");
              break;
            }
          }
        }

        const cellb = document.createElement("td");
        cellb.appendChild(x);
        row.appendChild(cellb);

        stable.append(row);
      }
    }

    function select_addart(id, obj) {
      var relateval = $("#relatecontent").val();
      const artArray = relateval.split(",");

      if (obj.checked) {
        let n = 0;
        for (let j = 0; j < artArray.length; j++) {
          if (id == artArray[j]) {
            n = 1;
            break;
          }

        }
        if (n != 1) {
          artArray.push(id);

        }
        $("#relatecontent").val(artArray.join(","));

      }
      else {
        let newArray = [];
        for (let j = 0; j < artArray.length; j++) {
          if (id == artArray[j]) {
            continue;
          }
          newArray.push(artArray[j]);
        }
        $("#relatecontent").val(newArray.join(","));
      }
    }


    var current_page =<% echo << obj["pageinfo"]["current"].to_int(); %>;
    var min_page =<% echo << obj["pageinfo"]["min"].to_int(); %>;
    var max_page =<% echo << obj["pageinfo"]["max"].to_int(); %>;

    function select_prepage() {

      if (current_page < 1) {
        $("#select_pre").addClass("disabled");
        return false;
      }

      if ($("#select_pre").hasClass("disabled")) {
        $("#select_pre").removeClass("disabled");
      }

      var page = current_page - 1;
      $.getJSON("/admin/gettoparticle?page=" + page + "&topicid=" + topicid, function (result) {
        if (result.code == 0) {
          addselect_content(result.alist);
        }
      });
      return false;
    }

    function select_nextpage() {

      if (current_page >= max_page) {
        $("#select_next").addClass("disabled");
        return false;
      }
      if ($("#select_next").hasClass("disabled")) {
        $("#select_next").removeClass("disabled");
      }

      var page = current_page + 1;
      $.getJSON("/admin/gettoparticle?page=" + page + "&topicid=" + topicid, function (result) {
        if (result.code == 0) {
          addselect_content(result.alist);
        }
      });
      return false;
    }
    
        $(document).ready(function(e) {
        $("#relate-icoimg").change(function(){
            var fd=new FormData();
            if($(this).get(0).files[0].size>4596640){
                $('#myfiletobigModal').modal('show');
                return false;
            }
            fd.append("upfile",$(this).get(0).files[0]);
            $("#progress-bar-show").show();
            $("#progress-bar-result").hide();
            $.ajax({
                url:"/imageapi/upload?action=uploadimage",
                type:"POST",
                processData: false,
                contentType:false,
                data: fd,
                dataType: "json",
                xhr: function() {  // custom xhr
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ // check if upload property exists
                        myXhr.upload.addEventListener('progress',function(evt){
                            var percentComplete = Math.round(evt.loaded*100 / evt.total);
                            $( "#progress-bar").css("width",percentComplete*2);
                            $( "#progress-bar").html(percentComplete+'%');
                        }, false); // for handling the progress of the upload
                    }
                    return myXhr;
                },
                success:function(data){
                    if(data.state=="SUCCESS"){
                        $("#progress-bar-show").hide();
                        $("#progress-bar-result").show();
                        $("#icoimg").val(data.url);
						$("#progress-bar-result").html("<a href='"+data.url+"' target=_blank><img height=\"50\" width=\"50\"  src=\""+data.url+"\"/></a>");
                       $('#myfilesuccessModal').modal('show');
                    }
                     
                }
            });
        });
    });	  
  </script>
</body>

</html>